<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-03-02 09:54:41
 * @LastEditTime : 2023-08-24 15:48:06
-->
<script lang="ts" setup name="Topbar">
import useSettingsStore from '@g/store/modules/settings'
import Breadcrumb from '../Breadcrumb/index.vue'
import Tabbar from './Tabbar/index.vue'
import Toolbar from './Toolbar/index.vue'

const settingsStore = useSettingsStore()

const enableToolbar = computed(() => {
  return !(
    // (
    //   settingsStore.settings.menu.menuMode === 'head' && !settingsStore.settings.menu.enableSubMenuCollapseButton && (
    //     !settingsStore.settings.breadcrumb.enable || settingsStore.settings.app.routeBaseOn === 'filesystem'
    //   )
    // ) ||
    (
      settingsStore.settings.menu.menuMode === 'only-head' && (
        !settingsStore.settings.breadcrumb.enable || settingsStore.settings.app.routeBaseOn === 'filesystem'
      )
    )
  )
})

const enableBreadcrumb = computed(() => {
  const enable = settingsStore.settings.breadcrumb.enable || settingsStore.settings.app.routeBaseOn === 'filesystem'
  const enableTab = settingsStore.settings.tabbar.enable
  document.documentElement.style.setProperty('--ik-margin-top-with-bread', (enable && enableTab) ? '0px' : '24px')
  return enable
})

const scrollTop = ref(0)
const scrollOnHide = ref(false)
const topbarHeight = computed(() => {
  const tabbarHeight = settingsStore.settings.tabbar.enable ? parseInt(getComputedStyle(document.documentElement || document.body).getPropertyValue('--ik-tabbar-height')) : 0
  const toolbarHeight = enableToolbar.value ? parseInt(getComputedStyle(document.documentElement || document.body).getPropertyValue('--ik-toolbar-height')) : 0
  return tabbarHeight + toolbarHeight
})
onMounted(() => {
  window.addEventListener('scroll', onScroll)
})
onUnmounted(() => {
  window.removeEventListener('scroll', onScroll)
})
function onScroll() {
  scrollTop.value = (document.documentElement || document.body).scrollTop
}
watch(scrollTop, (val, oldVal) => {
  scrollOnHide.value = settingsStore.settings.topbar.mode === 'sticky' && val > oldVal && val > topbarHeight.value
})
</script>

<template>
  <div
    class="topbar-container"
    :class="{
      'has-tabbar': settingsStore.settings.tabbar.enable,
      'has-toolbar': enableToolbar,
      'has-breadcrumb': enableBreadcrumb,
      [`topbar-${settingsStore.settings.topbar.mode}`]: true,
      'shadow': !settingsStore.settings.topbar.switchTabbarAndToolbar && scrollTop,
      'hide': scrollOnHide,
      'switch-tabbar-toolbar': settingsStore.settings.topbar.switchTabbarAndToolbar,
      'is-only-head': settingsStore.settings.menu.menuMode === 'only-head',
    }"
    data-fixed-calc-width
  >
    <Breadcrumb v-if="enableBreadcrumb" />
    <Tabbar v-if="settingsStore.settings.tabbar.enable" />
    <Toolbar v-if="enableToolbar" />
  </div>
</template>

<style lang="scss" scoped>
.topbar-container {
  position: absolute;
  z-index: 999;
  top: 0;
  display: flex;
  flex-direction: column;
  border-radius: 4px 4px 0 0;
  background: var(--ik-main-bg);
  overflow: hidden;
  transition: width 0.3s, top 0.3s, transform 0.3s, var(--el-transition-box-shadow);
  // border-bottom: 1px solid var(--el-border-color);

  &.is-only-head{
    .tab-background {
      transform: rotateX(180deg);
    }
  }

  &.topbar-fixed,
  &.topbar-sticky {
    position: fixed;

    &.shadow {
      box-shadow: 0 10px 10px -10px var(--ik-box-shadow-color);
    }
  }

  &.topbar-sticky.hide {
    top: calc((var(--ik-tabbar-height) + var(--ik-toolbar-height)) * -1) !important;
  }

  &.switch-tabbar-toolbar {
    flex-direction: column-reverse;
  }

  .breadcrumb {
    height: var(--ik-breamcrumb-height);
    display: flex;
    align-items: center;
    margin: 12px 0 10px 30px;
  }
}
</style>
